What's the purpose of <hr>?

Purpose of the <hr> Tag in HTML

The <hr> tag in HTML is used to insert a horizontal rule (a thematic break) between sections of content. It visually separates content and indicates a shift in topic or context.

Basic <hr> Example

Key Points About <hr>

1<hr> is a void element (it has no closing tag).
2
It creates a horizontal line across the page.
3
Used to separate sections or indicate thematic breaks.
4
Its appearance (color, thickness, style) can be customized with CSS.

Custom Styled <hr>

Difficulty: 2/10

Topics: semantic HTML, visual separation, accessibility

Scenario Questions

0-2 years experience

1
You need a simple visual break between two paragraphs on a static page. How would you use <hr> and what should you keep in mind?
2
If you place an <hr> inside a <section>, what does it communicate to the browser and to assistive technology?
3
What are the downsides of replacing an <hr> with a div that has a top border for visual separation?

2-5 years experience

1
Your team swapped several <hr> tags for CSS borders to match a new design, but accessibility tests now fail. Why might that happen?
2
You notice extra spacing around an <hr> in a responsive layout on mobile. How would you debug and resolve the issue?
3
We need to hide the <hr> on mobile devices while keeping it on desktop. How would you implement that without losing semantic meaning?

5-8 years experience

1
A documentation site contains thousands of <hr> elements as section dividers. Discuss the performance, maintainability, and SEO implications, and suggest any better approaches.
2
Design a reusable component library that abstracts the <hr> element to guarantee consistent styling and accessibility across multiple teams. What considerations would you include?
3
Legacy browsers render <hr> inconsistently. What fallback strategies would you employ to ensure a consistent visual break?

8+ years experience

1
Our organization is migrating a monolithic HTML help system to a component‑driven architecture. How would you handle existing <hr> usage to preserve semantics while enabling future styling flexibility?
2
When defining a company‑wide design system, how do you decide whether to expose <hr> as a primitive component versus providing a CSS utility, considering cross‑team collaboration and theming?
3
If multiple product lines need different visual styles for thematic breaks, how would you architect a solution that keeps <hr> semantically correct yet allows per‑team customization at scale?

Follow-up Questions

❓How does an <hr> affect screen readers and other assistive tools?
❓When would you choose a CSS border over an <hr> for visual separation?
❓What default styles does the browser apply to <hr> and how can you customize them?